<!-- 触发基本事件 -->
<template>
	<setting-item-box :alone="true">
		<template #name>
			<n-text>绑定事件</n-text>
		</template>
		<my-select
			class="select-type-options"
			filterable
			placeholder="绑定组件触发的事件"
			v-model="interactEvents"
			:list="interactActions"
			:fileType="{ label: 'name', value: 'type' }"
		/>
	</setting-item-box>
	<setting-item-box v-if="interactEvents === 'customEvent'" :alone="true">
		<template #name>
			<n-text>自定义</n-text>
		</template>
		<AdvancedEvents :id="props.id" :interactOn="props.interactOn" />
	</setting-item-box>
</template>

<script setup>
import AdvancedEvents from './AdvancedEvents.vue';
const props = defineProps({
	id: {
		default: '',
		type: String
	},
	// 目标组件绑定的事件
	modelValue: {
		required: true
	},
	// 触发事件
	interactOn: {
		default: '',
		type: String
	}
});

const emits = defineEmits(['update:modelValue']);

const interactEvents = computed({
	get() {
		return props.modelValue;
	},
	set(value) {
		emits('update:modelValue', value);
	}
});
const { fetchTargetIndex } = $store.chart;

const interactActions = ref([]);
watch(
	() => props.id,
	(val) => {
		if (!val) return (interactActions.value = []);
		interactActions.value = $store.chart.componentList[fetchTargetIndex(val)].orgConfig.interactActions;
		/* if (interactActions.value.find((item) => item.type === 'customEvent')) return;
		interactActions.value.push(customEvent); */
	},
	{
		immediate: true
	}
);
</script>
